<template>
  <div style="margin:10px">
    <el-row :gutter="20">
      <el-col :span="14">
        <el-card header="销售订单走势图" style="font-weight: bold;">
          <div ref="outputTrendChart" style="height: 320px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <div>

      <div class="container">
        <div class="flex">
          <el-card header="工单延期率" style="font-weight: bold;" class="flex-1">
            <div ref="defermentFactorChart" style="height: 320px;"></div>
          </el-card>
          <el-card header="生产合格率" style="font-weight: bold;" class="flex-1">
            <div ref="qualificationRateChart" style="height: 320px;"></div>
          </el-card>
        </div>
      </div>



<!--      <el-row :gutter="20" style="margin-top: 12px">-->
<!--        <el-col :span="12">-->
<!--          <el-card header="工单延期率" style="font-weight: bold;">-->
<!--            <div ref="defermentFactorChart" style="height: 320px;"></div>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-card header="生产合格率" style="font-weight: bold;">-->
<!--            <div ref="qualificationRateChart" style="height: 320px;"></div>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--      </el-row>-->
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import { ElRow, ElCol, ElCard } from 'element-ui';

export default {
  name: 'StaticCharts',
  components: {
    ElRow,
    ElCol,
    ElCard
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      // 模拟数据
      const outputTrendData = {
        months: ['1月', '2月', '3月', '4月', '5月', '6月'],
        values: [0, 0, 0, 0, 12, 33]
      };

      const defermentFactorData = {
        total: 500,
        delayed: 120,
        onTime: 380
      };

      const qualificationRateData = {
        total: 1000,
        qualified: 800,
        unqualified: 200
      };

      // 初始化产量走势图
      const outputTrendChart = echarts.init(this.$refs.outputTrendChart);
      outputTrendChart.setOption({
        title: {
          text: `销售订单走势图`,
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: outputTrendData.months
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: outputTrendData.values,
          type: 'line',
          smooth: true
        }]
      });

      // 初始化工单延期率图
      const defermentFactorChart = echarts.init(this.$refs.defermentFactorChart);
      defermentFactorChart.setOption({
        title: {
          text: `工单总数: ${defermentFactorData.total}`,
          left: 'center'
        },
        series: [{
          type: 'pie',
          radius: '55%',
          label: {
            normal: {
              formatter: '{b}: {c} ({d}%)'
            }
          },
          data: [
            { value: defermentFactorData.delayed, name: '延期' },
            { value: defermentFactorData.onTime, name: '正常' }
          ]
        }]
      });

      // 初始化生产合格率图
      const qualificationRateChart = echarts.init(this.$refs.qualificationRateChart);
      qualificationRateChart.setOption({
        title: {
          text: `生产总数: ${qualificationRateData.total}`,
          left: 'center'
        },
        series: [{
          type: 'pie',
          radius: '65%',
          label: {
            normal: {
              formatter: '{b}: {c} ({d}%)'
            }
          },
          data: [
            { value: qualificationRateData.qualified, name: '合格' },
            { value: qualificationRateData.unqualified, name: '不合格' }
          ]
        }]
      });
    }
  }
};
</script>

<style scoped>

.container{
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60vw;
}

.flex-1{
  flex:1;
}
</style>
